<template>
    <div class="loginImage">
        <transition name="list">
            <!-- <img :src="imageUrl" alt="" class="image" v-if="inAnimation"> -->
            <el-image :src="imageUrl" class="image" v-show="inAnimation" @load="loadimage()"
                @error="errorImage()"></el-image>
        </transition>
    </div>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import { anyDayImage } from '../api/item'
const imageUrl = ref('../../public/tuzi.png')
const inAnimation = ref(true)
let Image = ref("")
const timeID = setInterval(async () => {
    setTimeout(async () => {
        Image = await anyDayImage().then((res: any) => {
            return res.data.match(/w*\/\/+(.*)png/g)[0].split('"')[0]
        })
        imageUrl.value = `https:${Image}`
    },500)

    inAnimation.value = false
    console.log(1)
}, 1000 * 10)

const loadimage = () => {
    inAnimation.value = true
    console.log("成功")
}

const errorImage = () => {
    imageUrl.value = '../../public/404.png'
    console.log("err")
}
onUnmounted(() => {
    clearInterval(timeID)
})
</script>
<style lang='less'>
.loginImage {
    width: 100%;
    height: 100%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    overflow: hidden;

    .image {
        width: 100%;
        height: 100%;
    }

    .list-enter-active,
    .list-leave-active {
        transition: all 0.5s ease;
    }

    .list-enter-from,
    .list-leave-to {
        opacity: 0;
        transform: translateX(30px);
    }
}
</style>